﻿<!DOCTYPE html>
<!--在线考试 考试-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <style>

        /* 考试 */
        .exam_main {
            max-width: 600px;
            margin: auto;
            display: block;
        }

        .exam_options_type {
            font-size: 14px;
            color: #6d6b6b;
            font-weight: normal;
            margin-left: 10px;
        }

        .exam_options_box {
            text-align: left;
        }

        .exam_options {
            min-width: 20px;
            text-align: center;
            display: inline-block;
            color: #696969;
            padding: 1px 3px;
            margin: 5px;
            border: 1px solid #dae0ee;
            cursor: pointer;
        }

            .exam_options:hover {
                color: #fff;
                background: #409eff;
                border: 1px solid #409eff;
            }

        .exam_options_action {
            color: #fff;
            background: #409eff;
        }

        .exam_options_noans {
            border: 1px solid #f7b3b3;
        }

        .exam_options_total {
            color: #6d6b6b;
        }

        .exam_main_work {
            background: #f0f1f3;
            padding: 10px 20px 20px 20px;
            margin-top: 20px;
        }

            .exam_main_work ul {
                padding-left: 0;
            }

        .exam_button {
            text-align: center;
            margin-top: 10px;
        }
        /* 考试 end */
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <p class="exam_options_total">当前第 {{i}} 题，共计 {{question.length}} 题。</p>
        <div class="exam_main">
            <div class="exam_options_box">
                <span v-for="(e,f) in question" @click="tmclick(f)">
                    <span class="exam_options_action exam_options" v-if="f+1==i">{{f+1}}</span>
                    <span class="exam_options" v-if="f+1!=i && e.option">{{f+1}}</span>
                    <span class="exam_options_noans exam_options" v-if="f+1!=i && !e.option">{{f+1}}</span>
                </span>
                <!-- <span v-for="(e,f) in question" @click="tmclick(f)">
                    <span class="exam_options_action exam_options" v-if="f+1==i">{{f+1}}. {{e.option}}</span>
                    <span class="exam_options" v-if="f+1!=i && e.option">{{f+1}}. {{e.option}}</span>
                    <span class="exam_options_noans exam_options" v-if="f+1!=i && !e.option">{{f+1}}.
                        {{e.option}}</span>
                </span> -->
            </div>
            <div class="exam_main_work">
                <ul>
                    <li v-for="(v,a) in question">
                        <h3>
                            {{a+1}}、{{v.questionContent}}
                            <span class="exam_options_type">[{{v.mark01=='0'?'单选题':v.mark01=='1'?'多选题':'判断题'}}]</span>
                        </h3>
                        <el-radio v-if="v.mark01!='1'" v-for="(b,c) in v.pX_QuestionOption" v-model="v.lastOption"
                                  :label="b.optionName">{{b.optionName+'.'+b.optionComment}}</el-radio>
                        <el-checkbox-group v-if="v.mark01=='1'" v-model="v.dxda" @change="change(v)">
                            <el-checkbox v-for="(b,c) in v.pX_QuestionOption" :label="b.optionName">
                                {{b.optionName+'.'+b.optionComment}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </li>
                </ul>
                <div class="exam_button">
                    <el-button type="primary" @click="clickReduce" size="mini">上一题</el-button>
                    <el-button type="primary" @click="clickAdd" size="mini">下一题</el-button>
                </div>
            </div>
            <br>
            <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" class="fr">
                <el-row justify="end">
                    <el-button type="primary" @click="onSubmitForm()">
                        交卷
                    </el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">
                        保存当前进度并退出
                    </el-button>-->
                </el-row>
            </el-form>
            <br> <br> <br> <br> <br>

        </div>
        <script type="text/javascript">
            Array.prototype.OrderByAsc = function (func) {
                var m = {};
                for (var i = 0; i < this.length; i++) {
                    for (var k = 0; k < this.length; k++) {
                        if (func(this[i]) < func(this[k])) {
                            m = this[k];
                            this[k] = this[i];
                            this[i] = m;
                        }
                    }
                }
                return this;
            }


            app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        isAction: false,
                        //业务表单内容
                        radio: '',
                        check: [],
                        id: '',
                        type: '',
                        Form: {

                        },
                        //表单验证
                        rules: {
                        },
                        seen: false,
                        ListItem: ListItem,
                        question: [],
                        i: 1,
                    }
                },
                updated: function () {
                    this.getFirstData()
                },
                created: function () {
                    this.id = getUrlParam("id");
                    this.type = getUrlParam("type");
                    this.getData();
                },
                mounted: function () {
                    $("li").hide();
                    var i = this.i - 1
                    $('li:eq(' + i + ')').show();

                },
                methods: {
                    tmclick: function (f) {
                        this.tmsave();
                        this.i = f + 1;
                    },
                    //提交数据
                    onSubmitForm: function () {
                        var mythis = this;
                       
                        //验证是否有未答题目
                        var arr = mythis.question;
                        var va = true;
                        for (var i = 0; i < arr.length; i++) {

                            if (arr[i].lastOption == '' || arr[i].lastOption == null || arr[i].lastOption == 'null') {
                                va = false;
                                break;
                            }
                        }
                        if (va) {
                            var url = '/api/PX_Exam/tjsj';
                           
                            myAjax("post", mythis, url, typeof(mythis.question[this.i - 1]) =='undefined' ? { id: this.id, mark02: this.type,mark03:'999'} : mythis.question[this.i - 1], function (response) {
                                //showMessage(response.data);
                                //跳页面到结果页面 OnlineexaminationInputPerson.html  window.location.href = "/login.html";
                                //parent.app.ListItem.dialogVisible = false;
                                console.log('response.data', response.data)
                                window.location.href = "OnlineexaminationInputPerson.html?id=" + response.data+'&pid='+mythis.id;
                            });
                        } else {
                            //验证失败
                            showMessage('请作答全部题目再提交！', 'error')
                            return false;
                        }

                    },
                    change: function (v) {
                        var orderArr = v.dxda.OrderByAsc(function (a) {
                            return a;
                        });

                        v.lastOption = orderArr.join(',');
                    },
                    clickAdd: function () {

                        this.tmsave();

                        this.i += 1
                        var nameLe = this.question.length;
                        $("li").hide();
                        $('li:eq(' + this.i + ')').show();
                        if (this.i > nameLe) {
                            this.$message({
                                message: '已经是最后一题！',
                                type: 'warning'
                            });
                            this.i = nameLe;
                        };

                    },
                    clickReduce: function () {
                        this.tmsave();
                        this.i -= 1
                        $("li").hide();
                        $('li:eq(' + this.i + ')').show();
                        if (this.i < 1) {
                            this.$message({
                                message: '已经是第一题！',
                                type: 'warning'
                            });
                            this.i = 1
                        };
                    },
                    tmsave: function () {
                        myAjax("post", this, '/api/PX_Exam/lastornextAsync', this.question[this.i - 1], function (response) {
                        }, false);
                    },
                    getData: function () {
                        var mythis = this;
                        myAjax("get", mythis, '/api/PX_Exam/cjks?id=' + this.id + '&type=' + this.type, null, function (response) {
                            var ajaxModel = response.data;
                            mythis.question = ajaxModel;
                            //加载数据后 多选数据 赋值
                            //判断是否没有生成试题
                            if (mythis.question.length == 0) {
                                showMessage('您已通过本次测试，点击提交按钮完成最终步骤！')
                            }
                            //判断是否是答错题
                            else if (mythis.question[0].mark01 == '答错题') {
                                mythis.dxssdeal();
                                showMessage('您已通过本次测试，继续将所有错题答对即可！')
                            }
                            //判断是否是初次答题 如果是继续答题 给提示 告知答题创建时间
                            else if (mythis.question[0].createTime != '' && mythis.question[0].createTime != null && mythis.question[0].createTime != 'null') {
                                mythis.dxssdeal();
                                showMessage('本次答题的创建时间是' + mythis.question[0].createTime + ',请继续答题！')
                            }
                        }, false,
                            function (response) {
                                showMessage(response.message, 'error');
                                parent.app.ListItem.dialogVisible = false;

                            }
                        );



                    },
                    dxssdeal: function () {
                        
                        for (var a = 0; a < this.question.length; a++) {
                            //console.log('question[a].mark01', this.question[a].mark01)
                            var option = this.question[a].lastOption;
                            if (this.question[a].mark01 == '1' && option != null) {

                                var arrque = option.split(',');

                                for (var b = 0; b < arrque.length; b++) {
                                    this.question[a].dxda.push(arrque[b]);
                                }

                            }

                        }

                    },
                    getFirstData: function () {

                        $("li").hide();
                        var i = this.i - 1
                        $('li:eq(' + i + ')').show();
                    },
                    closeDialog: function () { closeDialog(this); },
                }
            });
        </script>

</body>

</html>